[#include "/includes/_layout.html"/]
[#macro css_import]
<link href="${webctx}/resources/css/menu-config.css" rel="stylesheet"/>
[/#macro]
[#macro script_import]
<script type="text/javascript" src="${webctx}/resources/js/ddsort.js"></script>
[/#macro]
[@layout]
<div class="wrapper wrapper-content">

<div class="row animated fadeInLeft">
	[#include "/includes/menus-setting.html" /]
	<div class="col-sm-11">
	<div class="row content-tabs">
		<nav class="page-tabs J_menuTabs">
	       <div class="page-tabs-content" style="margin-left: 0px;">
	       	   <a href="${webctx}/setting" class="J_menuTab">公众号</a>
		       <a href="${webctx}/menu" class="J_menuTab active">公众号菜单</a>
		       <a href="${webctx}/matter" class="J_menuTab">图文消息</a>
	       </div>
	   	</nav>
	</div>
	<div class="content row ibox-content">
  <div class="menu_setting_area js_editBox"> 
   <div class="menu_preview_area"> 
    <div class="mobile_menu_preview"> 
     <div class="mobile_hd tc">[#if authUser??]${authUser.nick_name}[#else]没有公众号[/#if]</div> 
     <div class="mobile_bd"> 
      <ul class="pre_menu_list grid_line ui-sortable ui-sortable-disabled" id="menuList"> 
       <li class="js_addMenuBox pre_menu_item grid_item size1of1"> <!-- no_extra -->
	       <a href="javascript:void(0);" class="pre_menu_link js_addL1Btn" title="最多添加3个一级菜单"> 
	       <i class="icon14_menu_add"></i>添加菜单 
	       </a>
       </li> 
      </ul> 
     </div> 
    </div> 
    <!-- <div class="sort_btn_wrp"> 
     <a id="orderBt" class="btn btn_default" href="javascript:void(0);" style="display: inline-block;">菜单排序</a> 
     <span id="orderDis" class="dn btn btn_disabled" style="display: none;">菜单排序</span> 
     <a id="finishBt" href="javascript:void(0);" class="dn btn btn_default" style="display: none;">完成</a> 
    </div> --> 
    <div class="panel-footer" align="center">
   	 	<button id="saveMenu" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i>提交</button>
	</div>
   </div> 
   
    <!-- 菜单编辑区域 -->
    <div class="menu_form_area"> 
     
    <div id="js_rightBox" class="portable_editor to_left" style="display: block;">
    	<div class="alert alert-success" style="padding-top: 10px;">
			<strong>提示:</strong>
			<p>创建自定义菜单后，由于微信客户端缓存，需要24小时微信客户端才会展现出来。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。</p>
			<p>可以直接拖拽菜单排序</p>
		</div>
	    <div id="js_none" class="menu_initial_tips tips_global">
	     	点击左侧菜单进行编辑操作
	    </div>
     <div class="editor_inner" style="display: none;"> 
      <div class="global_mod float_layout menu_form_hd js_second_title_bar"> 
       <h4 class="global_info"> 菜单名称 </h4> 
       <div class="global_extra"> 
        <a href="javascript:void(0);" id="jsDelBt" style="color: red;">删除菜单</a> 
       </div> 
      </div> 
      <div class="menu_form_bd" id="view"> 
       <div id="js_innerNone" style="display:none;" class="msg_sender_tips tips_global">
        	<font color="blue">已添加子菜单，仅可设置菜单名称。</font>
       </div> 
       <div class="frm_control_group js_setNameBox" style="display: none;"> 
        <label for="" class="frm_label"> <strong class="title js_menuTitle">菜单名称</strong> </label> 
        <div class="frm_controls"> 
         <span class="frm_input_box with_counter counter_in append"> 
         	<input type="text" class="frm_input js_menu_name" /> 
         </span> 
         <p class="frm_msg fail js_titleEorTips dn" style="display: none;">字数超过上限</p> 
         <p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p> 
         <p class="frm_tips js_titleNolTips">字数不超过4个汉字或8个字母</p> 
        </div> 
       </div> 
       <div class="frm_control_group js_setConent" style="display: none;"> 
        <label for="" class="frm_label"> <strong class="title js_menuContent">菜单内容</strong> </label> 
       </div> 
       <div class="menu_content_container" style="display: none;"> 
        <div class="menu_content url jsMain" id="url" style="display: none;"> 
         <form action="" id="urlForm" onsubmit="return false;"> 
          <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p> 
          <div class="frm_control_group"> 
           <label for="" class="frm_label">页面地址</label> 
           <div class="frm_controls"> 
            <span class="frm_input_box"> 
            	<input type="text" class="frm_input" id="urlText" name="urlText" style="width: 80%"/> 
            	<!-- <a id="sel_model" href="javascript:void(0)">选择模块</a> -->
            </span> 
            <p class="profile_link_msg_global menu_url mini_tips warn dn js_warn" style="display: none;"> 请勿添加其他公众号的主页链接 </p> 
            <p class="frm_tips" id="js_urlTitle" style="display: none;"> 来自<span class="js_name"></span><span style="display:none;"> -《<span class="js_title"></span>》</span> </p> 
           </div> 
          </div> 
         </form> 
        </div> 
        <div class="menu_content sended" style="display:none;"> 
         <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p> 
         <div class="msg_wrp" id="viewDiv"></div> 
         <p class="frm_tips">来自<span class="js_name">素材库</span><span style="display:none;"> -《<span class="js_title"></span>》</span></p> 
        </div> 
        <div id="js_errTips" style="display:none;" class="msg_sender_msg mini_tips warn"></div> 
       </div> 
      </div> 
     </div> 
     <!-- <span class="editor_arrow_wrp"> <i class="editor_arrow editor_arrow_out"></i> <i class="editor_arrow editor_arrow_in"></i> </span> --> 
    </div>
   </div> 
  </div>
	</div>
	</div>
	</div>
</div>
<script type="text/javascript">
var params = {}; var selectModulelDialog = null;
$(document).ready(function(){
	function resetMenuForm(){
		//清空右边菜单编辑区域数据
		$(".global_info").html("菜单名称");
		$(".js_menu_name").val("");
		$("#urlText").val("");
		$(".editor_inner").hide();
		$("#js_none").show();
	}
	
	$("#jsDelBt").click(function(){
		if($("li.selected").hasClass("jslevel1")){
			//删除一级菜单
			obz.showMessage("删除一级菜单会连子菜单一起删除，确定删除吗！", function(){
				$("#menuList li.js_addMenuBox").eq(0).show();
				$("#menuList li.js_addMenuBox").eq(0).removeClass("size1of1").removeClass("size1of2").removeClass("size1of3").addClass("size1of"+$("#menuList li.jslevel1").length);
				$("#menuList li.jslevel1").each(function(){
					$(this).removeClass("size1of1").removeClass("size1of2").removeClass("size1of3").addClass("size1of"+$("#menuList li.jslevel1").length);
				});
				$("li.selected").find("ul li").each(function(){
					$(this).remove();
				});
				$("li.selected").remove();
				resetMenuForm();
				return false;
    		});
		}else{
			//alert($("li.selected").siblings(".jslevel2").length);
			//重新设置该父菜单下所有子菜单元素的id值
			 if($("li.selected").siblings(".jslevel2").length==0){
				$("li.selected").each(function(i){
					var type=$(this).attr("type");
					$(this).parent().parent().parent().attr("type",type);
					$(this).parent().parent().parent().attr("menu-url","");
				});
			}
			$("li.selected").siblings(".jslevel2").each(function(i){
				$(this).attr("id", "subMenu_menu_" + $(this).parent().parent().parent().attr("id") + "_" + i);
			});
			$("li.selected").remove();
			resetMenuForm();
		}
		//unBindLiClick();
		//bindLiClick();		
		return false;
	});
	
	//清除菜单数据
	function clearMenus(){
		$("#menuList li.jsMenu").remove();
		$("#menuList li.js_addMenuBox").eq(0).show();
	}
	
	//加载菜单数据
	function getMenus(){
		$(".menu_preview_area").mask("正在读取菜单数据...");
		obz.ajaxJson(obz.ctx+"/menu/list", params, function(resp){
			$(".menu_preview_area").unmask();
			if(resp.code==200){
				clearMenus();
				var data = resp.data;
				var menus = data.attrs.menu.button;
				if(menus.length<=0){
					//没有菜单
					$("#menuList li.js_addMenuBox").eq(0).show();
					return;
				}
				if(menus.length == 3){
					$("#menuList li.js_addMenuBox").eq(0).hide();
				}else{
					$("#menuList li.js_addMenuBox").eq(0).show();
				}
				var classIndex = -1;
				if(menus.length == 3 || menus.length==2) classIndex = 3;
				if(menus.length == 1) classIndex = 2;
				$("#menuList li.js_addMenuBox").eq(0).addClass("size1of"+classIndex+"");
				for(var i=0;i<menus.length;i++){
					var menu = menus[i];
					menu.index = i;
					//直接显示菜单
					var itemHtml = obz.dataTemplate4obj($("#menu_item_tpl").html(), menu);
					$("#menuList").append(itemHtml);
					$("#menu_"+i).addClass("size1of"+classIndex+"");
					if(menu.sub_button.length>0){
						//有子菜单
						for(var k=0;k<menu.sub_button.length;k++){
							var submenu = menu.sub_button [k];
							submenu.index = k;
							submenu.parentId = "menu_"+i;
							var subItemHtml = obz.dataTemplate4obj($("#sub_menu_item_tpl").html(), submenu);
							$("#menu_"+i).find("ul li.js_addMenuBox").before(subItemHtml);
						}
					}
				}
				unBindLiClick();
				bindLiClick();
				
				$('#menuList').DDSort({
					target: 'li.jslevel1',		//示例而用，默认即'li'
					floatStyle: {
						'border': '1px solid #ccc',
						'background-color': '#fff'
					}
				});
				
				$('.sub_pre_menu_list').DDSort({
					target: 'li.jslevel2',		//示例而用，默认即'li'
					floatStyle: {
						'border': '1px solid #ccc',
						'background-color': '#fff'
					}
				});
			}
		});
	}
	
	//绑定菜单点击事件
	function bindLiClick() {
		//菜单点击
		$("#menuList li").click(function(){
			$("#js_none").hide();
			$(".js_menu_name").val("");
			$("#urlText").val("");
			if($(this).hasClass("jslevel1")){
				clearLicss();
				$(this).addClass("current selected");
				//点击的是一级菜单
				hideJsTitleBox();
				$(this).find("div.js_l2TitleBox").show();
				$(".global_info").html($(this).find("span.js_l1Title").text());
				//判断一级菜单下面是否已经存在子菜单
				if($(this).find("ul li").length > 1){
					$(".editor_inner").show();$(".menu_content_container").show();
					$(".js_setNameBox").show();$("#js_innerNone").show();
					$(".js_setConent").hide();
					$("#url").hide();					
				}else{
					$(".editor_inner").show();$(".menu_content_container").show();
					$(".js_setNameBox").show();$(".js_setConent").show();
					$("#url").show();$("#js_innerNone").hide();
					if($(this).attr("menu-url")!=null && $(this).attr("menu-url") !=""
							&& $(this).attr("menu-url") && $(this).attr("menu-url") !="undefined"
							&& typeof($(this).attr("menu-url")) != undefined){
						$("#urlText").val($(this).attr("menu-url"));			
					}
				}
			}else if($(this).hasClass("jslevel2")){
				//点击的是二级菜单
				//alert($(this).attr("id"));
				clearLicss();
				$(this).addClass("current selected");
				$(".global_info").html($(this).find("span.js_l2Title").text());
				$(".editor_inner").show();$(".menu_content_container").show();
				$(".js_setNameBox").show();$(".js_setConent").show();$("#js_innerNone").hide();
				$("#url").show();
				if($(this).attr("menu-url")!=null && $(this).attr("menu-url") !=""
						&& $(this).attr("menu-url") && $(this).attr("menu-url") !="undefined"
						&& typeof($(this).attr("menu-url")) != undefined){
					$("#urlText").val($(this).attr("menu-url"));					
				}
			}else {
				//点击新增菜单
				if($(this).parent().attr("id") == "menuList"){
					//点击增加一级菜单
					var menu = new Object();
					menu.index = $("#menuList li").length+1;
					menu.name = "菜单名称";
					menu.type = "view";
					var itemHtml = obz.dataTemplate4obj($("#menu_item_tpl").html(), menu);
					$("#menuList").append(itemHtml);
					var classIndex = $("#menuList li.jslevel1").length+1 > 3 ? 3 : $("#menuList li.jslevel1").length+1;
					$("#menu_"+menu.index).addClass("size1of"+classIndex+"");
					$("#menuList li.jslevel1").each(function(){
						$(this).removeClass("size1of1").removeClass("size1of2").removeClass("size1of3").addClass("size1of"+classIndex+"");
					});
					if($("#menuList li.jslevel1").length == 3){
						$(this).hide();
					}else{
						$(this).removeClass("size1of1").removeClass("size1of2").removeClass("size1of3").addClass("size1of"+classIndex+"");	
					}
				}else{
					//点击增加二级菜单
					if($(this).parent().find("li").length >=6){
						obz.info("最多添加五个子菜单");
						return false;
					}
					var submenu = new Object();
					submenu.name = "菜单名称";
					submenu.type="view";
					submenu.url = "";
					submenu.parentId=$(this).parent().parent().parent().attr("id");
					submenu.index = $(this).siblings(".jslevel2").length;
					var subItemHtml = obz.dataTemplate4obj($("#sub_menu_item_tpl").html(), submenu);
					if($(this).parent().find("li").length ==1) {
						$(this).before(subItemHtml);	
					} else{
						$("#subMenu_menu_"+submenu.parentId+"_"+parseInt(submenu.index-1)).before(subItemHtml);
					}
					$(".global_info").html(submenu.name);
					clearLicss();
					$("#subMenu_menu_"+submenu.parentId+"_"+submenu.index).addClass("current selected");
				}
				unBindLiClick();
				bindLiClick();
			}
			return false;
		});
	}
	
	function unBindLiClick (){
		$("#menuList li").unbind("click");
	}
	
	//清除li元素 css
	function clearLicss(){
		$("#menuList li").each(function(){
			if($(this).hasClass("current selected")){
				$(this).removeClass("current selected");				
			}
		});
	}
	
	//隐藏所有的添加菜单按钮项
	function hideJsTitleBox(){
		$("div.js_l2TitleBox").hide();
	}
	//菜单名称文本框失去焦点事件
	$(".js_menu_name").blur(function(){
		//查找当前选中的li。设置菜单名称
		if($("li.selected").hasClass("jslevel1")){
			if($(this).val() != ""){
				$("li.selected").find("span.js_l1Title").text($(this).val());
			}
		}else{
			if($(this).val() != ""){
				$("li.selected").find("span.js_l2Title").text($(this).val());
			}
		}
		return false;
	});
	$("#urlText").blur(function(){
		if($(this).val() != ""){
			$("li.selected").attr("menu-url", $(this).val());				
		}
	});
	function init(){
		getMenus();
	}
	init();
	$("#saveMenu").click(function(){
		var menuArray = new Array();
		var errorArray = new Array();
		//1.获取一级菜单
		$("#menuList li.jslevel1").each(function(){
			if($(this).find("ul li.jslevel2").length > 0){
				var menu = new Object();
				menu.name = $(this).find("span.js_l1Title").text();
				var submenuArray = new Array();
				//有子菜单
				$(this).find("ul li.jslevel2").each(function(){
					var submenu = new Object();
					submenu.type=$(this).attr("type");
					submenu.name=$(this).find("span.js_l2Title").text();
					submenu.url=$(this).attr("menu-url");
					submenuArray.push(submenu);
					if($(this).attr("menu-url") == null || $(this).attr("menu-url")==""){
						var errorObj = new Object();
						errorObj.msg="子菜单" + submenu.name + "没有设置页面链接地址;<br>";
						errorArray.push(errorObj);
					}
				});
				menu.sub_button=submenuArray;
				menuArray.push(menu);
			}else{
				//无子菜单
				var menu = new Object();
				menu.type=$(this).attr("type");
				menu.name=$(this).find("span.js_l1Title").text();
				menu.url=$(this).attr("menu-url");
				menuArray.push(menu);
				if($(this).attr("menu-url") == null || $(this).attr("menu-url")==""){
					var errorObj = new Object();
					errorObj.msg="菜单" + menu.name + "没有设置页面链接地址;<br>";
					errorArray.push(errorObj);
				}
			}
		});
		if(errorArray.length>0){
			var errmsg = "";
			for(var i=0;i<errorArray.length;i++){
				var eobj = errorArray[i];
				errmsg += eobj.msg;
			}
			obz.error(errmsg);
			return false;
		}
		if(menuArray.length<=0){
			obz.warn("没有菜单数据可以提交");
			return false;
		}
		obz.showMessage("确定发布菜单吗？", function(){
			$(".menu_preview_area").mask("正在保存...");
			$.post(obz.ctx+"/menu/save", {menus : JSON.stringify(menuArray)}, function(json) {
				$(".menu_preview_area").unmask();
				if(json.code!=200){
					BootstrapDialog.alert({title:'提示', message:json.msg});
				}else{
					obz.msg("发布成功");
				}
			},"json");
		});
	});
});
</script>
<!-- html 模板文件 -->
<script type="text/template" id="menu_item_tpl">
		<li class="jsMenu pre_menu_item grid_item jslevel1 ui-sortable ui-sortable-disabled" type="{type}" menu-url="{url}" key="{key}" id="menu_{index}"> 
       	<a href="javascript:void(0);" class="pre_menu_link"> 
       		<i class="icon_menu_dot js_icon_menu_dot dn" style="display: none;"></i> 
       		<i class="icon20_common sort_gray"></i> 
       		<span class="js_l1Title">{name}</span> 
       	</a> 
        <div class="sub_pre_menu_box js_l2TitleBox" style="display:none;"> 
         <ul class="sub_pre_menu_list"> 
          	<li class="js_addMenuBox">
	          	<a href="javascript:void(0);" class="jsSubView js_addL2Btn" title="最多添加5个子菜单" >
	          	<span class="sub_pre_menu_inner js_sub_pre_menu_inner"><i class="icon14_menu_add"></i>添加菜单</span>
	          	</a>
          	</li> 
         </ul> 
         <i class="arrow arrow_out"></i> 
         <i class="arrow arrow_in"></i> 
        </div> 
       </li>
</script>
<script type="text/template" id="sub_menu_item_tpl">
		<li id="subMenu_menu_{parentId}_{index}" type="{type}" menu-url="{url}" class="jslevel2">
          	<a href="javascript:void(0);" class="jsSubView" >
          		<span class="sub_pre_menu_inner js_sub_pre_menu_inner"><i class="icon20_common sort_gray"></i>
          		<span class="js_l2Title">{name}</span>
          		</span>
          	</a>
          </li>
</script>
[/@layout]
<script type="text/javascript">
	Template.init("#menu-setting");
	Template.initSecond("#menu-public");
</script>